<template>
  <div ref="myChart" style="height: 100%;width:100%"></div>
</template>
<script>
export default {
  name: 'LVeRing',
  props: {
    stage: {
      type: Array,
      default:function(){
				return [];
			}
    }
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  created() {},
  mounted() {
    this.drawLine()
    console.log(111,this.stage)
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      console.log(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: '阶段占比图',
          left: 'center',
          top: 20,
        },
        color: ['#8AC3F8', '#FFA897', '#8693F3', '#BC8CEF', '#6DD5DE'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            top:80,
            radius: '70%',
            data: this.stage,
            label: {
              normal: {
                formatter: '{b} {d}%',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 13,
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
  },
}
</script>

<style scoped>
</style>